<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="btn">点击1</button>
<div class="box1">盒子</div>
<a href="https://www.baidu.com">百度一下</a>

<div class="container">
    <div class="bigImg">
        <img src="图1URL" alt="">
        <div class="mask">图片1</div>
    </div>
    <div class="smallImg">
        <!--使用foreach实现元素遍历，给每一个元素添加点击事件-->
        <img src="图1URL" alt="图片1">
        <img src="图2URL" alt="图片2">
        <img src="图3URL" alt="图片3">
    </div>
</div>


<script>


    document.querySelector("a").addEventListener("click", function (event) {
        event.preventDefault() // 阻止默认行为
        // 获取href值
        console.log(this.href) // 获取属性值
        console.log(this.innerText)
    })


    // 需求：
    // 1.鼠标经过div盒子时，实现盒子的背景颜色，文字颜色及大小切换
    // 2.鼠标经过div盒子时，实现盒子的内容的获取及修改
    document.querySelector(".box1").addEventListener("mouseover", function (event) {
        this.style.backgroundColor = "red" // 修改样式
        this.style.color = "white"
        this.style.fontSize = "30px"
        this.innerText = "鼠标经过"  // 修改内容
        console.log(this.className)
    })
    document.querySelector(".box1").addEventListener("mouseout", function (event) {
        // 还原样式
        this.style.backgroundColor = "white"
        this.style.color = "black"
        this.style.fontSize = "16px"
        this.innerText = "盒子"
    })


    // 1.获取事件源对象---获取点击的按钮
    let btnEle = document.querySelector(".btn")
    console.log(btnEle)
    //     2.注册监听事件--- 添加点击事件
    // btnEle.onclick = function (event) {
    //     // 3.实现响应事件的逻辑
    //     console.log(event.target.innerText, "button被点击了")
    // }

    btnEle.addEventListener("click", function (event) {
        console.log(event.target.innerText, "button被点击了")
    })
</script>
</body>
</html>
